
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>monitro matrix select page</title>
</head>
<body>
    <div id="list">
        
    </div>
    <input type="button" value="取消" id="cancel">

    <script>

        var listDom = document.getElementById('list')
        var cancelDom = document.getElementById('cancel')
        
        for (var i = 0; i < 5; i++) {
            var div = document.createElement('div')
            div.innerHTML = 'item' + i + ': url: rtmp://live.example.com/rtmp/' + i + ' ; name: 名称' + i + ' <input type="button" value="选择" index="' + i + '">'
            listDom.appendChild(div)
        }

        listDom.addEventListener('click', function (e) {
            var index = e.target.getAttribute('index')
            if (index != undefined) {
                var msg = {
                    monitor_matrix_type: 'choose_single_source',
                    data: {
                        name: '名称' + index,
                        source_url: 'rtmp://live.example.com/rtmp/' + index
                    }
                }
                window.opener.postMessage(msg, '*')
                window.close()
            }
        })
        cancelDom.addEventListener('click', function () {
            window.close()
        })
    </script>
</body>
</html>
